<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../../Resouces/js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<style>
.custom .jcrop-vline, .custom .jcrop-hline { background: #666; } 
.custom .jcrop-handle{ background-color: #fff; border:solid 1px #000; } 
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#999;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
}
#cropbox{ border:solid #666 2px;}
#couper{ font-weight:bold;}
input{ padding:5px; }
</style>
<script language="Javascript">
	var _x = 130;
	var _y = 175;
	var _imgW 	= 0;
	var _imgH 	= 0;
	
	function iniciar(imgW,imgH){	
		_imgW = imgW;
		_imgH = imgH;
	
		$('#cropbox').Jcrop({
			aspectRatio: _x / _y,
			onChange: showPreview,
			onSelect: updateCoords,
			addClass: 'custom',
			bgColor: 'white',
			bgOpacity: .50
			
			//setSelect: [ (_imgW/_imgH), 0, _imgW, _imgH ]
		});
	}
	function updateCoords(c){
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	function checkCoords(){
		if (parseInt($('#w').val())) return true;
		alert('Please select a crop region then press submit.');
		return false;
	};
	function showPreview(coords){
		if (parseInt(coords.w) > 0){
			var rx = _x / coords.w;
			var ry = _y / coords.h;

			$('#preview').css({
				width: Math.round(rx * _imgW) + 'px',
				height: Math.round(ry * _imgH) + 'px',
				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
				marginTop: '-' + Math.round(ry * coords.y) + 'px'
			});
		}
	}
	
	$(function(){
		$('#annuler').click(function(){
			parent.makeJcrop();
		});
		$('#couper').click(function(){
			$(this).attr("disabled","-1");
			if($.trim($('#h').val())==""){
				alert('Vous devez s\u00E9lectionner une zone de recadrage.');
				$(this).removeAttr("disabled");
			}
			else parent.selectedImage($('#x').val(),$('#y').val(),$('#w').val(),$('#h').val());
		});
	});
</script>

</head>
<body>
<table bgcolor="#FFFFFF" border="0" cellpadding="10" cellspacing="0" align="center" height="100%">
<tr>
<td colspan="2" style="color:#333">
<div style="margin-bottom:5px; font-size:18px; font-weight:bold;">Recadrer cette photo</div>
Vous pouvez faire glisser le champ pour s&eacute;lectionner la zone de recadrage, puis utiliser les poign&eacute;es pour la redimensionner.
</td>
</tr>
<tr>
<td width="134" align="right" valign="middle">
<!-- This is the image we're attaching Jcrop to -->
<img border="0" width="130" height="175" src="flowersthumb.jpg" id="cropbox" style="z-index:100; position:fixed; outline:none; " />
<!-- This is the form that our event handler fills --></td>
<td width="537" align="left" valign="middle">
<div id="preview-layer" style=" width:130px; height:175px; overflow:hidden; color:#999; border:solid #000 2px;">
<img src="flowersthumb.jpg" id="preview" />

</div>
<div style="text-align:center; width:130px; padding-top:5px;">Aper&ccedil;u</div>
</td>
</tr>
<tr>
<td colspan="2" valign="bottom">

<p>
<form action="crop.php" method="post" onSubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input id="couper" type="button" value="Appliquer les modifications" />&nbsp;&nbsp;<input id="annuler" type="button" value="Annuler" />
</form></p>

</td>
</tr>
</table>
</body>
</html>